<template>
  <div class="infinite-loading" @scroll="handleScroll">
    <slot></slot>
    <div v-if="isLoading" class="loader">
      加载中...
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isLoading: false
    };
  },
  methods: {
    handleScroll(event) {
      const { scrollTop, scrollHeight, clientHeight } = event.target;
      if (scrollTop + clientHeight >= scrollHeight && !this.isLoading) {
        this.isLoading = true;
        this.$emit('loadMore');
      }
    }
  }
};
</script>
 
<style scoped>
.infinite-loading {
  height: 500px; /* 设置一个高度 */
  overflow-y: scroll;
  position: relative;
}
.loader {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 10px;
}
</style>